<!--
 * @Author: doing
 * @Date: 2023-08-23 16:25:39
 * @LastEditors: git config user.name && git config user.email
 * @LastEditTime: 2023-08-24 20:19:13
 * @FilePath: \center\src\pages\Refresh.vue
 * @Description: 
 * 这是令牌刷新页面
 * Copyright (c) 2023 by 1540265624@qq.com, All Rights Reserved. 
-->
<template>
  <div class="box">
    <div class="loading-container">
      <div class="loading-icon">⏳</div>
      <div class="loading-text">正在重新获取身份令牌中...<span class="loading-dots"></span></div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { PcCookie, Key } from '~/utils/cookie'
import { useRouter } from "vue-router"
import {
  updataToken
} from '~/api/auth.js'

const redirectURL = 'http://localhost:5000/'
const router = useRouter()
const showDots = ref(true)

onMounted(() => {
  setInterval(() => {
    showDots.value = !showDots.value;
  }, 1000);
})

const refreshToken = async function () {
  await updataToken().then(res => {
    console.log(res)
    const { userInfo, access_token, refresh_token, expires_in } = res.data
    if (res.code == 20000) {
      PcCookie.set(Key.userInfoKey, userInfo, expires_in)
      PcCookie.set(Key.accessTokenKey, access_token, expires_in)
      PcCookie.set(Key.refreshTokenKey, refresh_token, expires_in)
    }
    // 跳转回来源页面
    window.location.href = redirectURL
  }).catch(err => {
    //如果出错了,直接跳回登录页面
    router.push('/login')
  })
}

refreshToken()

</script>

<style scoped>
.box{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background-color: #f5f5f5;
}

.loading-container {
  text-align: center;
}

.loading-icon {
  font-size: 48px;
  color: #4070f4;
  margin-bottom: 20px;
  animation: spin 3s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  20% {
    transform: rotate(0deg);
  }

  25% {
    transform: rotate(90deg);
  }

  45% {
    transform: rotate(90deg);
  }

  50% {
    transform: rotate(180deg);
  }

  70% {
    transform: rotate(180deg);
  }

  75% {
    transform: rotate(270deg);
  }

  95% {
    transform: rotate(270deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.loading-text {
  font-size: 24px;
  color: #555555;
}

.loading-dots {
  animation: dots 1s infinite;
}

@keyframes dots {

  0%,
  20% {
    content: ".";
  }

  40%,
  60% {
    content: "..";
  }

  80%,
  100% {
    content: "...";
  }
}
</style>